<template>
  <div class="consumpiton_and_settlement">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="选择账期:" label-width="70px">
        <el-select
          v-model="paymentGuid"
          placeholder="请选择"
          size="mini"
          clearable
          v-if="activeName=='first'?true:false"
        >
          <el-option
            v-for="item in paymentGuidoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-date-picker
          style="width:150px"
          v-if="activeName=='second'?true:false"
          v-model="jiesuanyear"
          type="year"
          value-format="yyyy"
          placeholder="选择年"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          size="mini"
          icon="el-icon-search"
          v-if="activeName=='first'?true:false"
        >查询</el-button>
        <el-button
          type="primary"
          @click="onSubmit2"
          size="mini"
          icon="el-icon-search"
          v-if="activeName=='second'?true:false"
        >查询</el-button>
      </el-form-item>
      <el-form-item >
        <el-button
          type="primary"
          @click="onExport"
          size="mini"
          icon="el-icon-document-copy"
          v-if="activeName=='first'?true:false"
        >导出</el-button>
        <el-button
          type="primary"
          @click="onExport2"
          size="mini"
          icon="el-icon-document-copy"
          v-if="activeName=='second'?true:false"
        >导出</el-button>
      </el-form-item>
      <el-form-item v-if="isauth('settle_execute')">
        <el-button
          type="primary"
          @click="settlementSubmit"
          size="mini"
          icon="el-icon-warning-outline"
          v-if="activeName=='first'?true:false"
        >结算</el-button>
        <el-button
          type="primary"
          @click="settlementSubmit2"
          size="mini"
          icon="el-icon-warning-outline"
          v-if="activeName=='second'?true:false"
        >结算</el-button>
      </el-form-item>
      <el-form-item v-if="isauth('settle_audit')">
        <el-button
          type="primary"
          @click="audittSubmit"
          size="mini"
          icon="el-icon-check"
          v-if="activeName=='first'?true:false"
        >审核</el-button>
        <el-button
          type="primary"
          @click="audittSubmit2"
          size="mini"
          icon="el-icon-check"
          v-if="activeName=='second'?true:false"
        >审核</el-button>
      </el-form-item>
    </el-form>
    <div class="tabs_main">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="本期结算" name="first">
          <el-table
            ref="table"
            :data="detailslist"
            border
            v-loading="loading"
            highlight-current-row
            :span-method="objectSpanMethod"
            :header-cell-style="headFirst"
            style="width: 100%"
          >
            <el-table-column prop="merchantName" width="110" label="结算消费点"></el-table-column>
            <el-table-column prop="consumeBalance" width="110" label="销售汇总(元)">
              <template slot-scope="scope">
                <div>{{scope.row.consumeBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="yearProfitLossBalance" width="120" label="本年度未收(元)">
              <template slot-scope="scope">
                <div>{{scope.row.yearProfitLossBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="lastYearBalance" width="120" label="上年度未收(元)">
              <template slot-scope="scope">
                <div>{{scope.row.lastYearBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="periodNoBalance" width="150" label="本期末收款总额(元)">
              <template slot-scope="scope">
                <div>{{scope.row.periodNoBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="ageProfitLossBalance" label="本年未收款总计(元)">
              <template slot-scope="scope">
                <div>{{scope.row.ageProfitLossBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="mustPeriodBalance" width="120" label="应结金额(元)">
              <template slot-scope="scope">
                <div>{{scope.row.mustPeriodBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="realityPeriodBalance" width="120" label="实结金额(元)">
              <template slot-scope="scope">
                <div>{{scope.row.realityPeriodBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="periodTime" label="结算日期" min-width="158"></el-table-column>
            <el-table-column prop="examineTime" label="审核日期" min-width="158"></el-table-column>
            <el-table-column prop="year" label="年度结算"></el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChangepage"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="recordCount"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="年度结算" name="second">
          <el-table
            ref="table"
            :data="detailslist2"
            border
            v-loading="loading2"
            highlight-current-row
            style="width: 100%"
            :header-cell-style="headFirst"
          >
            <el-table-column prop="merchantName" width="110" label="结算消费点"></el-table-column>
            <el-table-column prop="ConsumeBalance" width="110" label="总收入(元)">
              <template slot-scope="scope">
                <div>{{scope.row.ConsumeBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop=" lastPeriodAgeBalance" width="120" label="上年未收(元)">
              <template slot-scope="scope">
                <div>{{scope.row. lastPeriodAgeBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="lastPeriodYearBalance" width="150" label="上年未收款调整(元)">
              <template slot-scope="scope">
                <div>{{scope.row.lastPeriodYearBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="profitLossBalance" width="150" label="本年未收款总额(元)">
              <template slot-scope="scope">
                <div>{{scope.row.profitLossBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="shareNoBalance" label="未收款分摊(元)">
              <template slot-scope="scope">
                <div>{{scope.row.shareNoBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="mustPeriodBalance" width="120" label="应结金额(元)">
              <template slot-scope="scope">
                <div>{{scope.row.mustPeriodBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="realityPeriodBalance" width="120" label="实结金额(元)">
              <template slot-scope="scope">
                <div>{{scope.row.realityPeriodBalance | amountyuan}}</div>
              </template>
            </el-table-column>
            <el-table-column prop=" periodFlag" label="年度结算"></el-table-column>
            <el-table-column prop="periodTime" label="结算日期" min-width="158"></el-table-column>
            <el-table-column prop="examineTime" label="审核日期" min-width="158"></el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChangepage2"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="recordCount2"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      searchInfo3: {},
      //本期账期
      paymentGuid: "",
      paymentGuidoption: [],
      loading: false,
      detailslist: [],
      activeName: "first",
      pageSize: 10,
      pageNum: 1,
      currentPage: 1,
      recordCount: 0,

      searchInfo: {},
      exportdetailslist: [],
      filename: "本期消费结算",
      //合并列
      rowspanindex: 0,

      //年度结算
      detailslist2: [],
      loading2: false,
      jiesuanyear: "",
      pageSize2: 10,
      pageNum2: 1,
      currentPage2: 1,
      recordCount2: 0,
      searchInfo2: {},
      exportdetailslist2: [],
      filename2: "年度消费结算"
    };
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      }
    }
  },
  mounted() {
    this.consumepaymentpage();
  },
  methods: {
    //账期查询
    consumepaymentpage() {
      this.searchInfo3.unitGuid = this.changeschoolid;
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/payment-day-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: 1,
            pageSize: 99999,
            searchInfo: this.searchInfo3
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          for (var i = 0; i < data.messageContent.data.length; i++) {
            let itemobj = {
              value: data.messageContent.data[i].paymentGuid,
              label: data.messageContent.data[i].paymentName
            };
            this.paymentGuidoption.push(itemobj);
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    onSubmit() {
      this.searchInfo = {};
      this.searchInfo.unitGuid = this.changeschoolid;
      this.searchInfo.paymentGuid = this.paymentGuid;
      if (
        this.searchInfo.paymentGuid == null ||
        this.searchInfo.paymentGuid == undefined ||
        this.searchInfo.paymentGuid == ""
      ) {
        this.$message({
          message: "请选择账期",
          type: "warning"
        });
        return;
      }
      this.paymentpage();
    },
    onExport() {
      if (this.detailslist == null || this.detailslist.length == 0) {
        this.$message({
          message: "查询数据后导出",
          type: "warning"
        });
        return false;
      }
      this.outexecel();
    },
    outexecel() {
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-payment-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.exportdetailslist = [
            {
              merchantName: "测试点",
              consumeBalance: "10",
              yearProfitLossBalance: "10",
              lastYearBalance: "10",
              periodNoBalance: "10",
              ageProfitLossBalance: "10",
              mustPeriodBalance: "10",
              realityPeriodBalance: "10",
              periodTime: "2020-06-03 09:18:46",
              examineTime: "2020-06-03 09:18:46",
              year: "1"
            },
            {
              merchantName: "测试点",
              consumeBalance: "10",
              yearProfitLossBalance: "10",
              lastYearBalance: "10",
              periodNoBalance: "10",
              ageProfitLossBalance: "10",
              mustPeriodBalance: "10",
              realityPeriodBalance: "10",
              periodTime: "2020-06-03 09:18:46",
              examineTime: "2020-06-03 09:18:46",
              year: "1"
            },
            {
              merchantName: "测试点",
              consumeBalance: "10",
              yearProfitLossBalance: "10",
              lastYearBalance: "10",
              periodNoBalance: "10",
              ageProfitLossBalance: "10",
              mustPeriodBalance: "10",
              realityPeriodBalance: "10",
              periodTime: "2020-06-03 09:18:46",
              examineTime: "2020-06-03 09:18:46",
              year: "1"
            },
            {
              merchantName: "测试点",
              consumeBalance: "10",
              yearProfitLossBalance: "10",
              lastYearBalance: "10",
              periodNoBalance: "10",
              ageProfitLossBalance: "10",
              mustPeriodBalance: "10",
              realityPeriodBalance: "10",
              periodTime: "2020-06-03 09:18:46",
              examineTime: "2020-06-03 09:18:46",
              year: "1"
            }
          ];
          setTimeout(() => {
            this.export2Excel();
          }, 100);
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    export2Excel() {
      const nowtime = this.getimeto();
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const multiHeader = [];
        const multiHeader2 = [];
        const merges = [];
        let tHeaderarr = [
          "结算消费点",
          "销售汇总(元)",
          "本年度未收(元)",
          "上年度未收(元)",
          "本期末收款总额(元)",
          "本年未收款(元)",
          "应结金额(元)",
          "实结金额(元)",
          "结算日期",
          "审核日期",
          "年度结算"
        ];
        // tHeaderarr.push('部门名称')
        const tHeader = tHeaderarr;
        //
        let filterValArr = [
          "merchantName",
          "yearProfitLossBalance",
          "lastYearBalance",
          "periodNoBalance",
          "ageProfitLossBalance",
          "mustPeriodBalance",
          "realityPeriodBalance",
          "periodTime",
          "examineTime",
          "year"
        ];

        console.log(this.exportdetailslist);
        const filterVal = filterValArr;
        const list = this.exportdetailslist;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename + nowtime
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    settlementSubmit() {
      if (this.detailslist.length == 0) {
        this.$message({
          message: "请查询后再结算",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-payment-settle"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            paymentGuid: this.searchInfo.paymentGuid,
            unitGuid: this.searchInfo.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.$message({
            message: "结算成功",
            type: "success"
          });
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    audittSubmit() {
      if (this.detailslist.length == 0) {
        this.$message({
          message: "请查询后再结算",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-payment-examine"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            paymentGuid: this.searchInfo.paymentGuid,
            unitGuid: this.searchInfo.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.$message({
            message: "审核成功",
            type: "success"
          });
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex);
      if (columnIndex === 4 || columnIndex === 5) {
        if (rowIndex === 0) {
          return {
            rowspan: this.rowspanindex,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // if (columnIndex === 5) {

      // }
    },
    paymentpage() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-payment-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading = false;
        if (data.messageCode == 200) {
          this.detailslist = data.messageContent;
         
          this.rowspanindex = this.detailslist.length;
          this.recordCount = data.messageContent.recordCount;
          this.currentPage = data.messageContent.pageNum;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.paymentpage();
    },
    handleCurrentChangepage(val) {
      this.pageNum = val;
      this.paymentpage();
    },
    //年度结算
    onSubmit2() {
      this.searchInfo2 = {};
      this.searchInfo2.unitGuid = this.changeschoolid;
      this.searchInfo2.year = this.jiesuanyear;
      if (
        this.searchInfo2.year == null ||
        this.searchInfo2.year == undefined ||
        this.searchInfo2.year == ""
      ) {
        this.$message({
          message: "请选择日期",
          type: "warning"
        });
        return;
      }
      this.paymentyearpage();
    },
    onExport2() {
      console.log(this.detailslist2);
      if (this.detailslist2 == null || this.detailslist2.length == 0) {
        this.$message({
          message: "查询数据后导出",
          type: "warning"
        });
        return false;
      }

      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-payment-year-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo2
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.exportdetailslist2 = data.messageContent.data;
          setTimeout(() => {
            this.export2Excel2();
          }, 100);
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    export2Excel2() {
      const nowtime = this.getimeto();
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const multiHeader = [];
        const multiHeader2 = [];
        const merges = [];
        let tHeaderarr = [
          "结算消费点",
          "总收入(元)",
          "上年未收(元)",
          "上年未收款调整(元)",
          "本年未收款总额(元)",
          "未收款分摊(元)",
          "应结金额(元)",
          "实结金额(元)",
          "年度结算",
          "结算日期",
          "审核日期"
        ];
        // tHeaderarr.push('部门名称')
        const tHeader = tHeaderarr;
        //
        let filterValArr = [
          "merchantName",
          "ConsumeBalance",
          "lastPeriodAgeBalance",
          "lastPeriodYearBalance",
          "profitLossBalance",
          "shareNoBalance",
          "mustPeriodBalance",
          "realityPeriodBalance",
          "periodFlag",
          "periodTime",
          "examineTime"
        ];

        console.log(this.exportdetailslist);
        const filterVal = filterValArr;
        const list = this.exportdetailslist2;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename2 + nowtime
        });
      });
    },
    settlementSubmit2() {
      if (this.detailslist2 == null || this.detailslist2.length == 0) {
        this.$message({
          message: "请查询后再结算",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl(
          "/terminal/consume/consume-year-payment-settle"
        ),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.searchInfo2.unitGuid,
            year: this.searchInfo2.year
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.$message({
            message: "结算成功",
            type: "success"
          });
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    audittSubmit2() {
      if (this.detailslist.length == 0) {
        this.$message({
          message: "请查询后再结算",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl(
          "/terminal/consume/consume-year-payment-settle"
        ),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            paymentGuid: this.searchInfo.paymentGuid,
            unitGuid: this.searchInfo.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.$message({
            message: "审核成功",
            type: "success"
          });
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.paymentyearpage();
    },
    handleCurrentChangepage2(val) {
      this.pageNum2 = val;
      this.paymentyearpage();
    },
    paymentyearpage() {
      this.loading2 = true;
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-payment-year-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading2 = false;
        if (data.messageCode == 200) {
          this.detailslist2 = data.messageContent.data;
          this.recordCount2 = data.messageContent.recordCount;
          this.currentPage2 = data.messageContent.pageNum;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.consumpiton_and_settlement {
  padding: 20px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-table__row .el-table__row--level-1 {
    background-color: #e5e9f2;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    height: 50px;
    width: 1234px;
    display: flex;
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 330px;
    }
  }
  .demo-form-inline1 {
    border-bottom: 1px solid #e5e9f2;
    .searchmarigin {
      margin-left: 20px;
    }
  }

  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>